<template>
  <view class="conten">
    <view class="avatar">
      <view class="ca">
        <image
          src="https://img2.baidu.com/it/u=3159376182,1482573850&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1700067600&t=786ac1a8f19bb4c8bf0bfe46d1f4360b"
          class="u-skeleton-circle"></image>
      </view>
      <view class="avatat_name">
        <text v-if="token">{{ userInfo.account }}</text>
        <text @click="actionLogout" v-if="!token">请点击登录</text>
      </view>
      <view class="ca2">
        <view v-if="token" class="nickid">{{ userInfo.mobile }}</view>
      </view>
    </view>

    <template v-if="token">
      <view class="condition_body">
        <view class="account_statuc">
          <view>
            <text class="account_num">0.00</text>
            <text class="account_name">账户余额</text>
          </view>
          <view>
            <text class="account_num">0.00</text>
            <text class="account_name">不可用余额</text>
          </view>
          <view>
            <text class="account_num">0.00</text>
            <text class="account_name">系统赠送余额</text>
          </view>
          <view>
            <text class="account_num">0.00</text>
            <text class="account_name">可用余额</text>
          </view>
        </view>
      </view>

      <!-- 这是一条华丽的分割线 -->
      <view class="cut-off-rule"></view>

      <view class="mine-list">
        <view @click="noFunction" v-for="(a_item, a_index) in list" :key="a_index" class="u-list">
          <view class="u-flex">
            <image :src="a_item.icon"></image>
            <text>{{ a_item.name }}</text>
          </view>
          <u-icon size="18" name="arrow-right"></u-icon>
        </view>
      </view>

      <div class="continer mt20">
        <u-button size="large" @click="actionLogout" type="error">退出登录</u-button>
      </div>
    </template>

  </view>
</template>
<script lang="ts" setup>
import { useStore } from "@/hooks/useStore";
import { noFunction } from "@/utils/commonToast";
import { storeToRefs } from "pinia";
const { actionLogout, flushUserInfo } = useStore()
const { userInfo, token } = storeToRefs(useStore())
flushUserInfo()

const list = [{
  id: 0,
  name: '菜单1',
  icon: 'https://img2.baidu.com/it/u=3159376182,1482573850&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1700067600&t=786ac1a8f19bb4c8bf0bfe46d1f4360b',
  url: ''
}, {
  id: 1,
  name: '菜单2',
  icon: 'https://img2.baidu.com/it/u=3159376182,1482573850&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1700067600&t=786ac1a8f19bb4c8bf0bfe46d1f4360b',
  url: ''
}, {
  id: 2,
  name: '菜单3',
  icon: 'https://img2.baidu.com/it/u=3159376182,1482573850&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1700067600&t=786ac1a8f19bb4c8bf0bfe46d1f4360b',
  url: ''
}, {
  id: 3,
  name: '菜单4',
  icon: 'https://img2.baidu.com/it/u=3159376182,1482573850&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1700067600&t=786ac1a8f19bb4c8bf0bfe46d1f4360b',
  url: ''
}, {
  id: 4,
  name: '菜单5',
  icon: 'https://img2.baidu.com/it/u=3159376182,1482573850&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1700067600&t=786ac1a8f19bb4c8bf0bfe46d1f4360b',
  url: ''
}]
</script>

<style lang="scss" scoped>
button::after {
  border: none;
}

.conten {
  width: 100%;
}

.right_icon {
  width: 34rpx;
  height: 38rpx;
}

.condition_body {
  width: auto;
  margin: 0px auto;
  height: auto;
  padding: 40rpx;
  border-radius: 20rpx;
  background-color: #FFFFFF;
  margin-top: -100rpx;

  .account_statuc {
    width: 100%;
    display: flex;
    justify-content: space-between;

    //margin-top:20rpx;
    text {
      display: block;
    }

    view {
      text-align: center;
      //border:1px solid #FFFFFF;
    }

    .account_num {
      font-weight: 500;
      font-size: 28rpx;
    }

    .account_name {
      padding-top: 5rpx;
      font-size: 25rpx;
    }
  }

  .account_operate {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;

    text {
      width: 30%;
      display: block;
      border-right: 1px solid #bebebe;
      font-weight: 500;
      font-size: 28rpx;
      padding-left: 30rpx;
    }
  }
}

.cut-off-rule {
  width: 100%;
  height: 20rpx;
  background-color: #F5F5F5;
}

.avatar {
  background-color: $uni-color-primary;
  padding-top: 30rpx;
  padding-bottom: 130rpx;

  .ca {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    image {
      border-radius: 50%;
      top: 50%;
      text-align: center;
      height: 160rpx;
      width: 160rpx;
      margin-bottom: 20rpx;
    }
  }

  .avatat_name {
    font-size: 35rpx;
    font-weight: 500;
    font-family: PingFangSC-Medium;
    color: #000000;
    text-align: center;

    text {
      color: #fff;
    }
  }

  .ca2 {
    width: 85%;
    margin: 0px auto;
    padding-top: 15rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;

    .nickname {
      vertical-align: middle;
      font-family: PingFangSC-Medium;
      font-weight: 400;
    }

    .nickid {
      z-index: 999;
      color: #FFFFFF;
      font-family: 'PingFangSC-Medium';
      font-size: 28rpx;
      display: flex;
      align-items: center;
    }
  }


}


.mine-list {
  background-color: #fff;
  // width: 92%;
  padding-right: 20px;

  .u-list {
    width: 100%;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin: 0px auto;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    border-bottom: 1px solid #ECECEC;

    .u-flex {
      width: 100%;
      display: flex;
      align-items: center;

      image {
        width: 45rpx;
        height: 45rpx;
      }

      text {
        font-size: 28rpx;
        padding-left: 30rpx;
        color: #333333;
        font-family: 'PingFangSC-Medium';
        font-weight: 500;
      }
    }
  }
}

.login_out {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: $uni-color-error;
  text-align: center;
  font-weight: 500;
  font-family: PingFangSC-Medium;
  font-size: 29rpx;
  margin-top: 30rpx;

  text {
    color: #fff;
  }
}
</style>
